<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>房产：{{ house }}套</h4>
    <button @click="changeToy">点我修改Child1的玩具</button>
    <button @click="changeComputer">点我修改Child2的电脑</button>
    <button @click="getAllChild($refs)">让所有孩子的书变多</button>
    <!-- $refs可以作为事件回调的参数进行传递,$refs是一个对象包含全部使用ref标识的子组件的实例对象 -->

    <!-- 为子组件添加ref属性 -->
    <Child1 ref="c1" />
    <Child2 ref="c2" />
  </div>
</template>

<script setup lang="ts" name="Father">
import { reactive, ref } from "vue";
import Child1 from "./Child1.vue";
import Child2 from "./Child2.vue";

let house = ref(4);
// 获取子组件的实例对象
let c1 = ref();
let c2 = ref();

// 注意：读取ref定义的响应式对象是否需要.value
let obj = reactive({
  a: 1,
  b: 2,
  c: ref(3),
});

console.log(obj.a, obj.b);
console.log(obj.c); // 1.读取reactive定义的响应式对象内的ref定义的属性,不需要.value

let x = ref(4);
console.log(x.value);// 2.读取ref直接定义的响应式对象必须.value

// 修改子组件中的数据,实现父->子的组件通信
function changeToy() {
  console.log(c1);
  console.log(c1.value);
  // c1.value 获取子组件的实例对象(可以看到子组件通过defneExpose暴露的数据)
  c1.value.toy = "小猪佩奇";
  // 在reactive定义的响应式对象(Proxy)内部访问ref定义的响应式对象(Refxxx)是不需要.value的
}
function changeComputer() {
  // c2 为Child2组件的实例对象
  c2.value.computer = "DELL";
}
function getAllChild(refs: object) {
  console.log(refs); // Proxy(Object) {c1: Proxy(Object), c2: Proxy(Object)}
  for (const ref of Object.values(refs)) {
    ref.book += 3;
  }
}

// 向外部提供数据
defineExpose({ house });
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}

.father button {
  margin-bottom: 10px;
  margin-left: 10px;
}
</style>
